<template>
  <div :class="className"
       :style="{height:height,width:width,autoResize:autoResize,top:top,'font-size': Math.round(5400/100) + 'px'}"/>
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import drawMixin from "@/utils/drawMixin";
// import {getHbacQryByMonth} from "@/api/hbacQryByMonth";

const animationTime = 10000;
var seriesList = [];
var datasetWithFilters = [];

export default {
  mixins: [drawMixin],
  name: 'ThreeLineChart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '80%'
    },
    top: {
      type: String,
      default: '10%'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      chartTimer: null,
      chartData: null,
      dataSet: [
        ["month", "totalNum", "succNum", "failNum"],
        ["202107", 1000000, 700000, 300000],
        ["202108", 120000, 60000, 60000],
        ["202109", 110000, 50000, 60000],
        ["202110", 100000, 80000, 20000],
        ["202111", 240000, 200000, 40000],
        ["202112", 700000, 350000, 350000],
        ["202201", 600000, 300000, 300000],
        ["202202", 950888, 462150, 488738],
        ["202203", 1199306, 550379, 648927],
        ["202204", 1183046, 577191, 605855],
        ["202205", 2952246, 759587, 2192659],
        ["202206", 1370124, 687787, 682337],
        ["202207", 2832039, 541656, 2290383],
        ["202208", 3297091, 711021, 2586070],
        ["202209", 1630415, 881159, 749256],
        ["202210", 16676, 8880, 7796],
        ["202211", 15525, 8019, 7506],
        ["202212", 276787, 116710, 160077],
        ["202301", 1035008, 273390, 761618],
        ["202302", 2640299, 443950, 2196349],
        ["202303", 3102989, 396925, 2706064],
        ["202304", 1563676, 321247, 1242429],
        ["202305", 980112, 380796, 599316],
        ["202306", 1907608, 574718, 1332890]],
      dataItems: ["totalNum", "succNum", "failNum"]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    // this.getChartData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.analyzeChartData()
      this.setOptions(this.dataSet)
    },

    getChartData() {
      this.chartTimer = setInterval(() => {
        // getHbacQryByMonth(this.params).then(response => {
        //   const length = response.months.length;
        //   const myDataSet = []
        //   myDataSet.push(["month", "totalNum", "succNum", "failNum"])
        //   for (let i = 0; i < length; i++) {
        //     myDataSet.push([response.months[i], response.total[i], response.succ[i], response.fail[i]])
        //   }
        //   this.dataSet = myDataSet
        // });
        // this.analyzeChartData();
        this.setOptions(this.dataSet);
      }, 30 * 1000)
    },

    analyzeChartData() {
      // echarts.util.each(this.orgNames, function (orgName) {
      this.dataItems.forEach(function (item) {
        console.log("analyzeChartDate each " + item);
        const datasetId = 'dataset_' + item;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                {dimension: 'month', gte: 202007}
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: true,
          smooth: true,
          name: item,
          // endLabel: {
          //   show: true,
          //   formatter: function (params) {
          //     return params.value[0] + ': ' + params.value[2];
          //   }
          // },
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value[2];
            },
            color: '#fff',
          },
          lineStyle: {
            width: 4
          },
          labelLayout: {
            moveOverlap: 'shiftX'
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            opacity: 0.3,
          },
          encode: {
            // x: 'month',
            y: item,
            // label: ['month',item],
            // itemName: 'month',
            // tooltip: [item]
          }
        });
      });
    },

    setOptions(dataSource) {
      //console.log("dataSource:" + dataSource)
      this.chart.clear()
      this.chart.setOption({
        animationDuration: animationTime,
        animationEasing: 'quadraticOut',
        // animationDuration: animationTime,
        // animationDurationUpdate: animationTime,
        // animationEasingUpdate: "linear", //数据更新动画缓动效果
        // animationEasing: 'linear',
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#FFF'
        },
        dataset: [
          {
            id: 'dataset_raw',
            source: dataSource
          },
          ...datasetWithFilters,
        ],

        tooltip: {
          show: true,
          trigger: 'item',
          extraCssText: 'width: 100px; height: 100px;font-size: 36px; font-family: Arial;font-weight: bold;',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            color: '#000',
            fontsize: 60
          }
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 20
          },
          splitLine: {
            lineStyle: {
              color: ['#c7c7c7'],
              width: 2
            }
          },
        },
        series: seriesList
      });
    }
  }
}
</script>
